import React from 'react'
import store from '../redux/store'
export default function Count() {
  return (
    <div>
      <p>{store.getState().count}</p>
      <button
        onClick={() => {
          store.dispatch({ type: 'add' })
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          // 正常情况下,store.dispatch只能传入action对象
          // store.dispatch({ type: 'addAsync' })
          // 但是当我们配置使用了redu-thunk以后,dispatch里面可以传入一个函数
          // 这个函数才是真正的中间件函数.redux-thunk其实就是让我们在store.dispatch中传入函数
          store.dispatch((dispatch) => {
            // 在这个函数体中,执行异步操作
            setTimeout(() => {
              dispatch({ type: 'add' })
            }, 1000)
          })
        }}
      >
        点击等待1s中再加
      </button>
    </div>
  )
}
